import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

// 引入cookie 方法
import { getCookie } from '@/utils/cookie'

// 引入菜单请求
import { getmenu } from '@/utils/https'

// 引入store 实例对象，然后通过store实例对象调用该对象中得dispatch 方法
import store from '@/store'

// 定义路由规则
let routes = [
    { path: '/', redirect: '/layout' },
    {
        path: '/layout',
        component: () => import('@/views/layout/Layout.vue'),
        children: [
            {
                path: '',
                component: () => import('@/views/layout/home/Home.vue'),
                name: 'home',
                meta: {
                    title: "首页",
                    icon: 'el-icon-user'
                }
            },
            {
                path: 'user',
                component: () => import('@/views/layout/user/User.vue'),
                name: 'user',
                meta: {
                    title: "用户管理",
                    icon: 'el-icon-star-off'
                }
            },
            {
                path: 'info',
                component: () => import('@/views/layout/info/Infomanage.vue'),
                name: 'info',
                meta: {
                    title: "信息管理",
                    icon: 'el-icon-info'
                },
                children: [
                    {
                        path: 'myinfo',
                        component: () => import('@/views/layout/info/Myinfo.vue'),
                        name: 'myinfo',
                        meta: {
                            title: "个人信息",
                            icon: 'el-icon-zoom-out'
                        },
                    }
                ]
            }

        ]
    },
    { path: '/login', component: () => import('@/views/login/Login.vue') }
]


// 创建路由对象
const router = new VueRouter({
    mode: 'history',
    routes
})


// 路由守卫
router.beforeEach((to, from, next) => {
    // 获取token
    let token = getCookie('token')
    if (token) {
        //说明已经登录 放行
        // 在此处 请求左侧菜单数据
        let role = localStorage.getItem('role')
        // 判断 如果vuex中得state 中得routes 存在值，则不需要再赋值了，否则赋值
        if (store.state.routes.length == 0) {
            getmenu({ role: role }).then(res => {
                // console.log(4, res);
                if (res.data.code == 200) {
                    // 将返回得路由数组信息push到之前默认得路由数组中，这样就会根据不同得数据返回，push不同得路由对象
                    res.data.data.forEach((item) => {
                        // 先给每一个路由对象新增一个component 属性，值为一个懒加载函数
                        item.component = () => import(`@/views/layout/leave/${item.name}.vue`)
                        routes[1].children.push(item)
                    })

                    // console.log(routes)
                    // 将更新完得routes 存放到vuex 中，这样我的aside 组件就能获取到该数据了
                    // this.$store.dispatch('setRoutesAsync',routes)
                    // console.log(6, store)
                    // 注意：该index.js 文件中得this不是组件实例对象，所以不能通过以前得方式调用了 如this.$store.dispatch()
                    // 现在 通过引入store 实例对象，就是以前得this.$store 就等于store 实例对象 所以可以用store.dispatch（）调用

                    // router 实例对象上重新追加routes ，相当于班级里发糖得案例
                    // 解决 新添加得路由点击出现白屏得问题
                    router.addRoutes(routes)
                    store.dispatch('setRoutesAsync', routes)
                    // 解决新增路由刷新页面出现白屏问题
                    next({ ...to, replace: true })
                }
            })
        } else {
            // 已经push 过了 直接放行
            next()
        }


    } else if (!token && to.path != '/login') {
        next('/login')
    } else {
        next()
    }
})

export default router